<template>
  <div class="cartcontrol"> 	
		<div class="cart-decrease" @click.stop="reduce">-</div>   
	<div class="cart-count">{{ quantity }}</div>
	<div class="cart-add" @click.stop="add">+</div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'	
import http from '@/utils/http'

export default {
	props: {
		goodsId: {
			default: null
		},
		count: {
			type: Number,
			default: 0
		},
		addType: {
			type: String,
			default: ''
		}
	},
	data () {
		return {
			quantity: null
		}
	},
  methods: {
		add () {
			let params = {
				goodsId: this.goodsId,
				type: 'add'
			}	
			http.post('/api/v1/cart', params, false, res => {
				if (res.status == 1) {
					this.quantity ++
					let obj = {
						goodsId: this.goodsId,
						quantity: parseInt(this.quantity)
					}
					this.$emit('quanyityChange', obj)
				}else {
					this.$vux.toast.text(res.msg, 'middle')
				}
			})
		},
		reduce () {
			let params = {
				goodsId: this.goodsId,
				type: 'reduce'
			}
			if (this.quantity <= 1) {
				this.quantity = 1
				return
			}
			http.post('/api/v1/cart', params, false, res => {
				if (res.status == 1) {
					this.quantity --
					let obj = {
						goodsId: this.goodsId,
						quantity: this.quantity
					}
					this.$emit('quanyityChange', obj)
				}else {
					this.$vux.toast.text(res.msg, 'middle')
				}
			})
		}
  },
  created () {
  	this.quantity = this.count
  }
}
</script>

<style scoped>
.cartcontrol {
	font-size: 0;
}
.cart-decrease,
.cart-add {
	display: inline-block;
	vertical-align: middle;
	width: 26px;
	height: 24px;
	border: 1px solid #cbcbcb;
	box-sizing: border-box;
	text-align: center;
	line-height: 22px;
	color: #666;
	font-size: 15px;
	font-weight: bold;
}
.cart-count {
	display: inline-block;
	vertical-align: middle;
	border: 1px solid #cbcbcb;
	border-left: 0;
	border-right: 0;
	height: 24px;
	line-height: 22px;
	font-size: 15px;
	color: #333;
	padding: 0 12px;
}
</style>
